<template>
  <div class="card p10 col" >
    <label class="title" @click="test">动作信息</label>
    <div id="root" class="col" style="width: 400px; height: 300px; overflow-y: scroll;">
      <label class="mt" v-for="(item, index) in logInfo.action"
      :key="index"
      >{{ item }}</label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue';
import { logInfo } from '../../service/notify';

const root = ref<HTMLDivElement | null>(null)

onMounted(() => {
  root.value = document.querySelector('#root');
});

watch(logInfo.action, () => {
  
  nextTick(() => {
    let div = root.value;
    if (div == null) {
      return;
    }
    div.scrollTop = div.scrollHeight;
  })
});

function test() {
  nextTick(() => {
    let div = root.value;
    if (div == null) {
      return;
    }
    div.scrollTop = div.scrollHeight;
  })
}

</script>
